import { useState, useRef } from "react";
import { Image, Button } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList, remove } from "@/api/freeTemplate";
import { PlusOutlined } from "@ant-design/icons";
import { history } from "umi";
import { filterValuationModel,filterFreeOrNot } from "@/const";

export default () => {
  const actionRef = useRef();
  const columns = [
    {
      title: "模板名称",
      dataIndex: "tempName",
      width: 150,
    },
    {
      title: "计费方式",
      width: 150,
      search: false,
      render: (_, record) => {
        return filterValuationModel(record.valuationModel);
      },
    },
    {
      title: "指定包邮",
      width: 150,
      search: false,
      render: (_, record) => {
        return filterFreeOrNot(record.freeOrNot);
      },
    },
  ];

  return (
    <PageContainer>
      {useCommonTable({
        actionRef,
        title: "",
        columns,
        modalWidth: 700,
        fetchList,
        remove,
        renderEdit: (record) => {
          return (
            <Button
              key="add"
              type="primary"
              onClick={() => {
                history.push(`/freeTemplate/edit?id=${record.id}`);
              }}
            >
              编辑
            </Button>
          );
        },
        renderAdd: () => {
          return (
            <Button
              key="add"
              icon={<PlusOutlined />}
              type="primary"
              onClick={() => {
                history.push(`/freeTemplate/edit`);
              }}
            >
              新增
            </Button>
          );
        },
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
